<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .login {
            width: 600px;
            /* height: 400px; */
            margin: 50px auto;
            border: 1px solid rgb(206, 206, 206);
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            padding: 50px;
        }
        
        .group {
            margin-top: 30px;
            width: 400px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .group label {
            width: 25%;
            text-align: right;
            height: 100%;
        }
        
        .group input {
            width: 65%;
            height: 100%;
            box-sizing: border-box;
            outline: none;
            border: 1px solid #999;
            border-radius: 6px;
            padding: 0 10px;
        }
        
        .group input[type="submit"] {
            width: 40%;
            height: 100%;
            background: red;
            color: #ffffff;
            border: none;
            outline: none;
            margin: 10px auto;
        }
    </style>
</head>

<body>
    <form action="./02_get_form_info.php" class="login" method="get">
        <h1>会员管理系统</h1>
        <div class="group">
            <label for="userName">姓名: </label>
            <input type="text" class="input" id="userName" name="userName">
        </div>
        <div class="group">
            <label for="tel">手机号: </label>
            <input type="tel" class="input" id="tel" name="tel">
        </div>
        <div class="group">
            <label for="password">密码: </label>
            <input type="password" class="input" id="password" name="password">
        </div>
        <div class="group">
            <label for="sex">性别: </label>
            <input type="text" class="input" id="sex" name="sex">
        </div>
        <div class="group">
            <label for="age">年龄: </label>
            <input type="text" class="input" id="age" name="age">
        </div>
        <div class="group">
            <input type="submit">
        </div>
    </form>
    <script>
        var input = document.querySelectorAll("input");
        var patternList = ["/^\w{6,12}$/", "/^1[^1247]\d{9}$/", "/^\w{8,16}$/", "/^男|女$/", "/^\d{1,2}$/"];
        var submit = document.querySelector("input[type='submit']");

        submit.onclick = function(e) {
            if (/^1[^1247]\d{9}$/.test(input[1].value) === false) {
                alert("请输入正确的手机号");
                e.preventDefault();
                return;
            }
            if (/^\w{8,16}$/.test(input[2].value) === false) {
                alert("密码必须是8-16位的字母、数字、下划线!");
                e.preventDefault();
                return;
            }
            if (/^男|女$/.test(input[3].value) === false) {
                alert("请输入男或女");
                e.preventDefault();
                return;
            }
            if (/^\d{1,2}$/.test(input[4].value) === false) {
                alert("请输入正确的年龄");
                e.preventDefault();
                return;
            }
            alert("提交成功！")
        }
    </script>
</body>

</html>